<template>
<view class="ui_uploader_cell">
    <view v-for="(item, index) in uploaderList" :key="index" class="ui_uploader_item">
        <icon class="ui_uploader_item_icon" @tap="clearImg" :data-index="index" type="clear" size="20" color="red"></icon>
        <image @tap="showImg" :data-index="index" :src="item"></image>
    </view>
    <view class="ui_uploader" @tap="upload" v-if="showUpload"></view>
</view>
</template>

<script>
// lib/upload/upload.js
var api = require("../../config/api.js");

export default {
  data() {
    return {
      uploaderList: [],
      uploaderData: [],
      uploaderNum: 0,
      showUpload: true
    };
  },

  components: {},
  props: {},
  methods: {
    // 删除图片
    clearImg: function (e) {
      var nowList = []; //新数据

      var uploaderList = this.uploaderList; //原数据

      var nowData = []; //新数据

      var uploaderData = this.uploaderData; //原数据

      for (let i = 0; i < uploaderList.length; i++) {
        if (i == e.currentTarget.dataset.index) {
          continue;
        } else {
          nowList.push(uploaderList[i]);
          nowData.push(uploaderData[i]);
        }
      }

      this.setData({
        uploaderNum: this.uploaderNum - 1,
        uploaderList: nowList,
        showUpload: true,
        uploaderData: nowData
      });
      this.$emit("refresh", {
        detail: this.data.uploaderData
      });
    },
    //展示图片
    showImg: function (e) {
      var that = this;
      uni.previewImage({
        urls: that.uploaderList,
        current: that.uploaderList[e.currentTarget.dataset.index]
      });
    },
    //上传图片
    upload: function (e) {
      var that = this;
      uni.chooseImage({
        count: 4 - that.uploaderNum,
        // 默认4
        sizeType: ['original', 'compressed'],
        // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'],
        // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          let tempFilePaths = res.tempFilePaths;
          console.log(JSON.stringify(tempFilePaths));
          uni.uploadFile({
            filePath: tempFilePaths[0],
            name: 'file',
            url: api.Upload,
            success: function (res) {
              if (res.statusCode == 200) {
                that.uploaderData.push(JSON.parse(res.data).data.url); // let uploaderData = that.data.uploaderData;
                // if (uploaderList.length==4){
                //     that.setData({
                //         showUpload:false
                //     })
                // }
                // that.refreshUpload(uploaderList);
                // that.setData({
                //   uploaderData: uploaderData,
                // });

                that.$emit("refresh", {
                  detail: that.data.uploaderData
                });
              }
            }
          });
          let uploaderList = that.uploaderList.concat(tempFilePaths);

          if (uploaderList.length == 4) {
            that.setData({
              showUpload: false
            });
          }

          that.setData({
            uploaderList: uploaderList,
            uploaderNum: uploaderList.length
          });
        }
      });
    },
    refreshUpload: function (uploaderList) {
      var that = this;

      if (uploaderList.length == 4) {
        that.setData({
          showUpload: false
        });
      }

      that.setData({
        uploaderList: uploaderList,
        uploaderNum: 1
      });
    }
  }
};
</script>
<style>
page {
  font-size: 11pt;
}

.domes_title {
  font-size: 20pt;
  color: #09bb07;
  padding: 70rpx 0;
  margin: 0 15%;
  text-align: center;
  font-weight: 400;
}

.ui_flex {
  position: relative;
}
.ui_flex:before {
  content: '';
  height: 2rpx;
  background: #eee;
  clear: both;
  display: block;
}

.ui_flex_item {
  position: relative;
  width: 33.3%;
  height: 250rpx;
  float: left;
  border-right: 2rpx solid #eee;
  border-bottom: 2rpx solid #eee;
  text-align: center;
  box-sizing: border-box;
}

.ui_flex_content {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100rpx;
}

.ui_flex_content image {
  width: 56rpx;
  height: 56rpx;
  margin: 0 auto;
}

.ui_flex_content view {
  height: 44rpx;
}
/* button */
.ui_btn{
  font-size: 13pt;
  height: 90rpx;
  line-height: 90rpx;
  width: 85%;
  text-align: center;
  border-radius: 15rpx;
  margin: 20rpx auto;
}

.ui_btn_default{
  border: 2rpx solid #d9d9d9;
  background: #fff;
}
.ui_btn_primary{
   border: 2rpx solid #09bb07;
   background: #09bb07;
   color: #fff;
}
.ui_btn_warn{
   border: 2rpx solid #e64340;
   background: #e64340;
   color: #fff;
}
.ui-btn_disabled{
  opacity: 0.3;
}
/* cell */
.ui_cell{
  display: flex;
  position: relative;
  height: 100rpx;
  line-height: 60rpx;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #eee;
  transform:translate3d(0rpx, 0px, 0px);
}
.ui_cell_hd{
  width: 40rpx;
  height: 40rpx;
  margin-top: 10rpx;
  margin-right: 10rpx;
}
.ui_cell_hd image{
  width:100%;
  height: 100%;
}
.ui_cell_bd{
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.ui_cell_bd_must{
  position: relative;
}
.ui_cell_bd_must:after{
  display: inline;
  content: '*';
  color: #E62B2B;
}
.ui_cell_ft{
  color: #999;
  text-align: right;
}
.ui_cell_input{
  height: 60rpx;
  line-height: 60rpx;
  flex: 3;
}
.ui_cell_getCode{
  z-index:999;
  position:absolute;
  top:20rpx;
  right:30rpx;
  height:60rpx;
  line-height:56rpx;
  padding:0 20rpx;
  font-size:9pt;
  color:#f4a83a;
  border:2rpx solid #f4a83a;
  border-radius:35rpx;
  box-sizing: border-box;
}
.ui_cell_aleryCode{
  z-index: 999;
  position: absolute;
  top: 20rpx;
  right:30rpx;
  height: 60rpx;
  line-height: 56rpx;
  padding: 0 20rpx;
  font-size: 9pt;
  color: #d9d9d9;
  border: 2rpx solid #d9d9d9;
  border-radius: 35rpx;
  box-sizing: border-box;
}
.ui_cell_picker{
  height: 60rpx;
  line-height: 60rpx;
  flex: 3;
}
.ui_cell_switch{
  position: relative;
  top: -4rpx;
}
.ui_cell_right{
  width: 20rpx;
  height: 20rpx;
  margin: 20rpx 0 0 20rpx;
  box-sizing: border-box;
  border-top: 2rpx solid #d9d9d9;
  border-right: 2rpx solid #d9d9d9;
  transform: rotate(45deg)
}
.ui_cell_del{
  position: absolute;
  height:100%;
  line-height: 100rpx;
  width: 120rpx;
  text-align: center;
  background: red;
  right: -120rpx;
  top: 0;
  color: #fff;
}
.ui_cell_cancel{
  position: absolute;
  height:100%;
  line-height: 100rpx;
  width: 120rpx;
  text-align: center;
  background: #d9d9d9;
  right: -240rpx;
  top: 0;
  color: #fff;
}
.ui_cell_toLeft{
  animation: fnToLeft 0.5s forwards;
}
.ui_cell_toRight{
  animation: fnToRight 0.5s forwards;
}
@keyframes fnToLeft{
  from{transform:translate3d(0rpx, 0px, 0px)}
  to{transform:translate3d(-240rpx, 0px, 0px)}
}
@keyframes fnToRight{
  from{transform:translate3d(-240rpx, 0px, 0px)}
  to{transform:translate3d(0rpx, 0px, 0px)}
}
.ui_panel{
  position: relative;
  padding: 30rpx;
  display: flex;
  border-bottom: 2rpx solid #eee;
}
.ui_panel_hd{
  margin-right: 20rpx;
  width: 120rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
}
.ui_panel_hd image{
  width: 100%;
  background: #eee;
  max-height: 100%;
  vertical-align: top;
}
.ui_panel_bd{
 flex: 1;
}
/* uploader */
.ui_uploader_cell {
  width: 100%;
  padding: 20rpx 0;
  box-sizing: border-box;
}
.ui_uploader_item{
  float: left;
  position: relative;
  margin-right: 10rpx;
  margin-bottom: 30rpx;
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
}
.ui_uploader {
  float: left;
  position: relative;
  margin-right: 25rpx;
  margin-bottom: 25rpx;
  width: 165rpx;
  height: 165rpx;
  border: 2rpx solid #d9d9d9;
  box-sizing: border-box;
  border-radius: 12rpx;
}

.ui_uploader:before {
  content: " ";
  position: absolute;
  width: 4rpx;
  height: 79rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}

.ui_uploader:after {
  content: " ";
  position: absolute;
  height: 4rpx;
  width: 79rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.ui_uploader_item_icon{
  position: absolute;
  right: -10rpx;
  top: -20rpx;
  background: #fff;
  border-radius: 50%;
}
.ui_uploader_item image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}



.hide{
  display: none;
}
.show{
  display: block;
}
.priceColor{
  color: #ea0014;
}
.moneyColor{
  color: #E3D21A;
}
/* 灰的 */
.eColor{
  color:#999
}
/* 字体大小 */
.size7{
  font-size:7pt;
}
.size9{
  font-size:9pt;
}
.size10{
  font-size:10pt;
}
.size11{
  font-size:11pt;
}
.size13{
  font-size:13pt;
}
.size16{
  font-size:16pt;
}
.size18{
  font-size:18pt;
}
/* 字数限制 */
.limit{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.limit2{
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>